<template>
  <div id = "toprintf">
    <div class="container" id="main">

      <div  class="box" >
        <div class="title">惠州市高级人才津贴申请表</div>
        <el-form
          :inline="true"
          :model="Form"
          ref="Form"
          class="Form"
        >
          <!-- 第一行 -->
          <el-row>
            <!-- 姓名   -->
            <el-col :span="2">
              <div class="grid-content bg-purple">
                <div class="label">姓名</div>
              </div>
            </el-col>

            <el-col :span="5">
              <div  class="grid-content bg-purple-dark">
                <el-form-item prop="name">
                  <el-input v-model="Form.reName"></el-input>
                </el-form-item>
              </div>
            </el-col>

            <!-- 性别 -->
            <el-col :span="1">
              <div class="grid-content bg-purple">
                <div class="label">性别</div>
              </div>
            </el-col>

            <el-col :span="2">
              <div class="grid-content bg-purple-dark">
                <el-form-item prop="sex">
                  <el-input v-model="Form.sex"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <!-- 出生年月 -->
            <el-col :span="3">
              <div class="grid-content bg-purple">
                <div class="label">出生年月</div>
              </div>
            </el-col>

            <el-col :span="5">
              <div class="grid-content bg-purple-dark">
                <el-form-item prop="birthday">
                  <el-input v-model="Form.birthday"></el-input>
                </el-form-item>
              </div>
            </el-col>

            <!-- 籍贯 -->
            <el-col :span="2">
              <div class="grid-content bg-purple">
                <div class="label">籍贯</div>
              </div>
            </el-col>

            <el-col :span="4">
              <div  class="grid-content bg-purple-dark">
                <el-form-item prop="origin">
                  <el-input v-model="Form.origin"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <!-- 第二行 -->
          <el-row>
            <!-- 工作单位及职务 -->
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <div class="label">工作单位及职务</div>
              </div>
            </el-col>

            <el-col :span="18">
              <div class="grid-content bg-purple-dark">
                <el-form-item prop="workUnitAndProfession">
                  <el-input v-model="Form.workUnitAndProfession"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <!-- 第三行 -->
          <el-row>
            <!-- 技术职称 -->
            <el-col :span="3">
              <div class="grid-content bg-purple">
                <div class="label">技术职称</div>
              </div>
            </el-col>

            <el-col :span="9">
              <div  class="grid-content bg-purple-dark">
                <el-form-item prop="professionalTitles">
                  <el-input v-model="Form.professionalTitles"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <!-- 专业特长 -->
            <el-col :span="3">
              <div class="grid-content bg-purple">
                <div class="label">专业特长</div>
              </div>
            </el-col>

            <el-col :span="9">
              <div class="grid-content bg-purple-dark">
                <el-form-item prop="speciality">
                  <el-input v-model="Form.speciality"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <!-- 第四行 -->
          <el-row>
            <!-- 技术全日制教育最高学历 -->
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div class="label">全日制教育最高学历</div>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="grid-content bg-purple-dark">
                <el-form-item prop="fullTimeHighestEducation">
                  <el-input v-model="Form.fullTimeHighestEducation"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <!-- 全日制教育最高学位 -->
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div class="label">全日制教育最高学位</div>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="grid-content bg-purple-dark">
                <el-form-item prop="fullTimeHighestDegree">
                  <el-input v-model="Form.fullTimeHighestDegree"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <!-- 毕业院校和专业 -->
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div class="label">毕业院校和专业</div>
              </div>
            </el-col>

            <el-col :span="4">
              <div  class="grid-content bg-purple-dark">
                <el-form-item prop="fullTimeEducationalBackgroundAndMajor">
                  <el-input
                    v-model="Form.fullTimeEducationalBackgroundAndMajor"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <!-- 第五行 -->
          <el-row>
            <!-- 在职教育最高学历 -->
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div class="label">在职教育最高学历</div>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="grid-content bg-purple-dark">
                <el-form-item prop="highestEducation">
                  <el-input v-model="Form.highestEducation"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <!-- 在职教育最高学位 -->
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div class="label">在职教育最高学位</div>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="grid-content bg-purple-dark">
                <el-form-item prop="highestDegree">
                  <el-input v-model="Form.highestDegree"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <!-- 毕业院校和专业 -->
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div class="label">毕业院校和专业</div>
              </div>
            </el-col>

            <el-col :span="4">
              <div  class="grid-content bg-purple-dark">
                <el-form-item prop="educationalBackGroundAndMajor">
                  <el-input
                    v-model="Form.educationalBackGroundAndMajor"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <!-- 第六行 -->
          <el-row>
            <!-- 工作地点 -->
            <el-col :span="3">
              <div class="grid-content bg-purple">
                <div class="label">工作地点</div>
              </div>
            </el-col>

            <el-col :span="13">
              <div  class="grid-content bg-purple-dark">
                <el-form-item prop="workPlace">
                  <el-input
                    v-model="Form.workPlace"
                    style="width: 390px"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <!-- 办公电话 -->
            <el-col :span="3">
              <div class="grid-content bg-purple">
                <div class="label">办公电话</div>
              </div>
            </el-col>

            <el-col :span="5">
              <div  class="grid-content bg-purple-dark">
                <el-form-item prop="workPhone">
                  <el-input v-model="Form.workPhone"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <!-- 第七行 -->
          <el-row>
            <!-- 申请类别 -->
            <el-col :span="3">
              <div class="grid-content bg-purple">
                <div class="label">申请类别</div>
              </div>
            </el-col>

            <el-col :span="13">
              <div  class="grid-content bg-purple-dark">
                <el-form-item prop="type">
                  <el-radio-group v-model="Form.type">
                    <el-radio label="博士"></el-radio>
                    <el-radio label="博士后"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
            <!-- 手机 -->
            <el-col :span="3">
              <div class="grid-content bg-purple">
                <div class="label">手机</div>
              </div>
            </el-col>

            <el-col :span="5">
              <div  class="grid-content bg-purple-dark">
                <el-form-item prop="phone">
                  <el-input v-model="Form.phone"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <!-- 第八行 -->
          <el-row>
            <!-- 到惠年月 -->
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div class="label">到惠年月</div>
              </div>
            </el-col>

            <el-col :span="20">
              <div class="grid-content bg-purple-dark label">
                从
                <el-form-item prop="time">
                  <el-input
                    v-model="Form.reTime"
                    style="width: 200px"
                    placeholder="填入年月"
                  ></el-input>
                </el-form-item>
                调入惠州工作
              </div>
            </el-col>
          </el-row>

          <!-- 第九行 -->
          <el-row>
            <!-- 以往申领情况 -->
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div class="label">以往领取津贴情况</div>
              </div>
            </el-col>

            <el-col :span="14">
              <div  class="grid-content bg-purple-dark label">
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item prop="pastBeginData">
                      <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="Form.pastBeginData"
                        style="width: 100%"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                    <el-form-item prop="pastEndData">
                      <el-date-picker
                        placeholder="选择日期"
                        v-model="Form.pastEndData"
                        style="width: 100%"
                        @change="getPastTime"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
              </div>
            </el-col>

            <!-- 月 -->

            <el-col :span="6">
              <div  class="grid-content bg-purple-dark label">
                共计
                <el-form-item prop="pastDiffMonth" >
                  <el-input
                    v-model="Form.pastDiffMonth"
                    style="width: 60px"
                    id="pastDiffMonth"

                  ></el-input>

                  个月
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <!-- 第十行 -->
          <el-row>
            <!-- 现在申领情况 -->
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div class="label">现在领取津贴情况</div>
              </div>
            </el-col>

            <el-col :span="14">
              <div  class="grid-content bg-purple-dark label">
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item prop="nowBeginData">
                      <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="Form.nowBeginData"
                        style="width: 100%"

                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                    <el-form-item prop="nowEndData">
                      <el-date-picker
                        placeholder="选择日期"
                        v-model="Form.nowEndData"
                        style="width: 100%"
                        @change="getNowTime() , smallToBig(),toSmall()"

                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
              </div>
            </el-col>

            <!-- 月 -->

            <el-col :span="6">
              <div  class="grid-content bg-purple-dark label">
                共计
                <el-form-item prop="nowDiffMonth" v>
                  <el-input
                    v-model="Form.nowDiffMonth"
                    style="width: 60px"
                  ></el-input>
                  个月
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <!-- 第十一行 -->
          <el-row>
            <!-- 共计金额 -->
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <div class="label">申请津贴金额合计</div>
              </div>
            </el-col>

            <el-col :span="10">
              <div  class="grid-content bg-purple-dark label">
                大写：
                <el-form-item prop="bigMoney">
                  <el-input v-model="Form.bigMoney" style="width: 200px"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="10">
              <div  class="grid-content bg-purple-dark label">
                小写：
                <el-form-item prop="smallMoney">
                  <el-input v-model="Form.smallMoney" style="width: 200px"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <div  class="grid-content bg-purple-dark label" style="height:180px">
                <p style="text:left">申请人签字：</p>
                <p>  年&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp月 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp   日</p>
              </div>
            </el-col>
            <el-col :span="4">
              <div  class="grid-content bg-purple-dark label" style="height:180px">
                <p>用人单位意见</p>
              </div>
            </el-col>
            <el-col :span="10">
              <div  class="grid-content bg-purple-dark label" style="height:180px">
                <p>经我单位认真审核，所提供的资料<br>真实有效，符合申请高级人才津贴跳。</p>
                <p>同意申报。&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp(盖章)</p>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3">
              <div  class="grid-content bg-purple-dark label" style="height:180px">
                <p>县（区）组织部或市直以上单位人力资源管理部门意见
                </p>
              </div>
            </el-col>
            <el-col :span="7">
              <div  class="grid-content bg-purple-dark label" style="height:180px">
                <p>&nbsp</p>
                <p>&nbsp</p>
                <p>（盖章）</p>
              </div>
            </el-col>
            <el-col :span="4">
              <div  class="grid-content bg-purple-dark label" style="height:180px">
                <p>市人才办意见</p>
              </div>
            </el-col>
            <el-col :span="10">
              <div  class="grid-content bg-purple-dark label" style="height:180px">
                <p>&nbsp</p>
                <p>&nbsp</p>
                <p>（盖章）</p>
              </div>
            </el-col>
          </el-row>

        </el-form>
      </div>
    </div>
    <el-button type="primary" round @click="submitInfo">提交</el-button>
    <el-button type="primary" round @click="save">保存</el-button>

  </div>
</template>
<script>
import {post} from "../common/serviceUtil";
import {objectPost} from "../common/serviceUtil";

export default {
  data() {
    return {
      Form: {
        id: "",
        uid: "",
        reName: "",
        sex: "",
        birthday: "",
        origin: "",
        workUnitAndProfession: "",
        professionalTitles: "",
        speciality: "",
        fullTimeHighestEducation: "",
        fullTimeHighestDegree: "",
        fullTimeEducationalBackgroundAndMajor: "",
        highestEducation: "",
        highestDegree: "",
        educationalBackGroundAndMajor: "",
        workPlace: "",
        workPhone: "",
        type: "",
        phone: "",
        reTime: "",
        pastBeginData: "",
        pastEndData: "",
        nowBeginData: "",
        nowEndData: "",
        pastDiffMonth: "",
        nowDiffMonth: "",
        smallMoney: "",
        bigMoney: "",
      },

    };

  },
  beforeCreate() {

    post("/page/selectPersonal").then(res => {

      this.Form.id = res.data.data.id
      this.Form.uid = res.data.data.uid
      this.Form.reName = res.data.data.reName
      this.Form.sex = res.data.data.sex
      this.Form.birthday = res.data.data.birthday
      this.Form.origin = res.data.data.origin
      this.Form.workUnitAndProfession = res.data.data.workUnitAndProfession
      this.Form.professionalTitles = res.data.data.professionalTitles
      this.Form.speciality = res.data.data.speciality
      this.Form.fullTimeHighestEducation = res.data.data.fullTimeHighestEducation
      this.Form.fullTimeHighestDegree = res.data.data.fullTimeHighestDegree
      this.Form.fullTimeEducationalBackgroundAndMajor = res.data.data.fullTimeEducationalBackgroundAndMajor
      this.Form.highestEducation = res.data.data.highestEducation
      this.Form.highestDegree = res.data.data.highestDegree
      this.Form.educationalBackGroundAndMajor = res.data.data.educationalBackGroundAndMajor
      this.Form.workPlace = res.data.data.workPlace
      this.Form.workPhone = res.data.data.workPhone
      this.Form.type = res.data.data.type
      this.Form.phone = res.data.data.phone
      this.Form.reTime = res.data.data.reTime
      this.Form.pastBeginData = res.data.data.pastBeginData
      this.Form.pastEndData = res.data.data.pastEndData
      this.Form.nowBeginData = res.data.data.nowBeginData
      this.Form.nowEndData = res.data.data.nowEndData
      this.Form.pastDiffMonth = res.data.data.pastDiffMonth
      this.Form.nowDiffMonth = res.data.data.nowDiffMonth
      this.Form.smallMoney = res.data.data.smallMoney
      this.Form.bigMoney = res.data.data.bigMoney

    })

  },
  methods: {
    getHTML() {
      let a = document.getElementById("main").innerHTML;
      alert(a);
    },
    submitInfo() {
      this.restatus =  2  // 0 未提交  1 通过   2 待审核  3 驳回
      objectPost("/page/insert", this.Form)
        .then(res => {
          if (res.data.status == 1) {
            this.$message({
              message: '您已成功修改信息',
              type: 'success'
            });
          } else {
            this.$message.error("系统错误")
            return;
          }
        })

    },
    save() {
      this.restatus = 0
      objectPost("/page/insert", this.Form)
        .then(res => {
          if (res.data.status == 1) {
            this.$message({
              message: '您已成功保存信息',
              type: 'success'
            });
          } else {
            this.$message.error("系统错误")
            return;
          }
        })
    },

    getPastTime() {
      var databegin = new Date(this.Form.pastBeginData);
      var dataend = new Date(this.Form.pastEndData);
      var datadiff = dataend.getTime() - databegin.getTime();
      var monthdiff = Math.floor(datadiff / (24 * 3600 * 1000 * 30));
      this.Form.pastDiffMonth = monthdiff;
    },
    getNowTime() {
      var databegin = new Date(this.Form.nowBeginData);
      var dataend = new Date(this.Form.nowEndData);
      var datadiff = dataend.getTime() - databegin.getTime();
      var monthdiff = Math.floor(datadiff / (24 * 3600 * 1000 * 30));
      this.Form.nowDiffMonth = monthdiff;
    },
    smallToBig() {
      var money = this.Form.nowDiffMonth * 1000;
      var cnNums = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //汉字的数字
      var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
      var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
      var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
      var cnInteger = "整"; //整数金额时后面跟的字符
      var cnIntLast = "元"; //整数完以后的单位
      //最大处理的数字
      var maxNum = 999999999999999.9999;
      var integerNum; //金额整数部分
      var decimalNum; //金额小数部分
      //输出的中文金额字符串
      var chineseStr = "";
      this.Form.bigMoney = chineseStr;
      var parts; //分离金额后用的数组，预定义
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger;
        this.Form.bigMoney = chineseStr;
        return chineseStr;
      }
      if (money == "") {
        return "";
      }

      money = parseFloat(money);
      if (money >= maxNum) {
        //超出最大处理数字
        return "超出最大处理数字";
      }


      //四舍五入保留两位小数,转换为字符串
      money = Math.round(money * 100).toString();
      integerNum = money.substr(0, money.length - 2);
      decimalNum = money.substr(money.length - 2);

      //获取整型部分转换
      if (parseInt(integerNum, 10) > 0) {
        var zeroCount = 0;
        var IntLen = integerNum.length;
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1);
          var p = IntLen - i - 1;
          var q = p / 4;
          var m = p % 4;
          if (n == "0") {
            zeroCount++;
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0];
            }
            //归零
            zeroCount = 0;
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q];
          }
        }
        chineseStr += cnIntLast;
      }
      //小数部分
      if (decimalNum != "") {
        var decLen = decimalNum.length;
        for (var i = 0; i < decLen; i++) {
          var n = decimalNum.substr(i, 1);
          if (n != "0") {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
          }
        }
      }
      if (chineseStr == "") {
        chineseStr += cnNums[0] + cnIntLast + cnInteger;
      } else if (decimalNum == "" || /^0*$/.test(decimalNum)) {
        chineseStr += cnInteger;
      }
      this.Form.bigMoney = chineseStr;
      return chineseStr;
    },
    toSmall() {
      let num = this.Form.nowDiffMonth * 1000;
      num = num.toFixed(2)
      num = num.replace(/\B(?=(\d{3})+\b)/g, ',')
      this.Form.smallMoney = num + "元";

    }



  }
};
</script>
<style >


.Form {
  position: absolute;
  top: 10%;
  bottom: 0;
  left: 2%;
  right: 2%;
  margin: auto;
  width: 700px;
}
.title {
  text-align: center;
  width: fit-content;
  position: absolute;
  top:5%;
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  border-collapse: collapse;
}
.label {
  position: absolute;
  font-size: 12px;
  text-align: center;
  line-height: 40px;
}
.p {
  text-align: center;
}
.el-input input {
  top: 2px;
  height: 24px;
  border: none;
  font-size: 16px;
}
.container {
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;

}
.el-row {
}
.el-col {
}
.bg-purple-dark {
  background: white;
  position: relative;
}
.bg-purple {
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-content {
  height: 36px;
  border: 1px solid black;
  position: relative;
  border-collapse: collapse;
}

.grid-content- {
  height: 36px;

  position: relative;
}
.row-bg {
  background-color: #f9fafc;
}

</style>
